<template>
  <view>
    <statusBar></statusBar>
    <logo></logo>
    <view style="height:10px;background-color: #f2f2f2;"></view>
    <view class="examtype">
      <view class="examtypetab" @click="choiceTypeOnline">
        <image v-if="activeType == 'online'" src="../../../static/img/exam/mnks.png"></image>
        <image v-if="activeType != 'online'" src="../../../static/img/exam/mnkss.png" ></image>
        <text :class="{ active: activeType == 'online' }">模拟考试</text>
      </view>
      <view class="examtypetab" @click="choiceTypeScene">
        <image v-if="activeType == 'scene'" src="../../../static/img/exam/xcmn.png"></image>
        <image v-if="activeType != 'scene'" src="../../../static/img/exam/xcmns.png" ></image>
        <text :class="{ active: activeType == 'scene' }">现场模拟</text>
      </view>
    </view>

    <view class="online" v-show="activeType == 'online'">
      <view style="height:10px;background-color: #f2f2f2;"></view>
      <view class="uni-padding-wrap uni-common-mt">
        <uni-segmented-control :current="current" :values="onlineitem" v-on:clickItem="onClickItem" :styleType="styleType" :activeColor="activeColor"></uni-segmented-control>
      </view>
      <view style="height:10px;background-color: #f2f2f2;"></view>
      <view class="content">
        <view v-show="current === 0">
          <view class="paper" v-for="(item, index) in mockExamList.jxz" :key="index">
            <view class="paper-left"><image src="../../../static/img/practice/yati.png"></image></view>
            <view class="paper-center">
              <view class="paper-title">{{ item.ExamName }}</view>
              <view class="paper-info">{{ item.StartTime }}-{{ item.EndTime }}</view>
            </view>
            <view class="paper-right"><button type="default" @click="goExam(item.ExamId)">继续答题</button></view>
          </view>
        </view>
        <view v-show="current === 1">
          <view class="paper" v-for="(item, index) in mockExamList.yks" :key="index">
            <view class="paper-left"><image src="../../../static/img/practice/yati.png"></image></view>
            <view class="paper-center">
              <view class="paper-title">{{ item.ExamName }}</view>
              <view class="paper-info">{{ item.StartTime }}-{{ item.EndTime }}</view>
            </view>
            <view class="paper-right"><button type="default" @click="goExam(item.ExamId)">开始答题</button></view>
          </view>
        </view>
        <view v-show="current === 2">
          <view class="paper" v-for="(item, index) in mockExamList.wks" :key="index">
            <view class="paper-left"><image src="../../../static/img/practice/yati.png"></image></view>
            <view class="paper-center">
              <view class="paper-title">{{ item.ExamName }}</view>
              <view class="paper-info">{{ item.StartTime }}-{{ item.EndTime }}</view>
            </view>
            <view class="paper-right"><button type="default">未开始</button></view>
          </view>
        </view>
        <view v-show="current === 3">
          <view class="endpaper" v-for="(item, index) in mockExamList.yjs" :key="index">
            <view class="paper-left"><image src="../../../static/img/practice/yati.png"></image></view>
            <view class="paper-title">{{ item.ExamName }}</view>
            <view class="paper-right">
              <text>{{ item.Score }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="scene" v-show="activeType == 'scene'">
      <view style="height:10px;background-color: #f2f2f2;"></view>
      <view class="uni-padding-wrap uni-common-mt">
        <uni-segmented-control :current="currents" :values="sceneitem" v-on:clickItem="onClickItem" :styleType="styleType" :activeColor="activeColor"></uni-segmented-control>
      </view>
      <view style="height:10px;background-color: #f2f2f2;"></view>
      <view class="content">
        <view v-show="current === 0">2</view>
        <view v-show="current === 1"></view>
        <view v-show="current === 2"></view>
      </view>
    </view>
  </view>
</template>

<script>
import statusBar from "@/components/status-bar.vue"
import logo from '../../../components/logo.vue';
import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
export default {
  components: {
    logo,
    uniSegmentedControl,
    statusBar
  },
  data() {
    return {
      activeType: 'online',
      onlineitem: ['进行中', '已开始', '未开始', '已结束'],
      sceneitem: ['已开始', '未开始', '已结束'],
      current: 0,
      currents: 0,
      styleType: 'text',
      activeColor: '#27B28B',
      mockExamList: []
    };
  },
  created() {
    if (uni.getStorageSync('token') == null || uni.getStorageSync('token') == undefined || uni.getStorageSync('token') == '') {
      uni.reLaunch({
        url: '../../login/login'
      });
    } else {
      this.getMockExam();
    }
  },
  methods: {
    getMockExam: function() {
      uni.request({
        method: 'GET',
        header: {
          'Content-Type': 'application/json',
          Authorization: uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/student/Exam/GetMockExam',
        data: {},
        success: res => {
          if (res.statusCode == 200) {
            this.mockExamList = res.data.data;
          } else {
            this.msg = '未知错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    getSceneExamMock: function() {
      uni.request({
        method: 'GET',
        header: {
          'Content-Type': 'application/json',
          Authorization: uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/student/Exam/GetSceneExamMock',
        data: {},
        success: res => {
          if (res.statusCode == 200) {
          } else {
            this.msg = '未知错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    goExam: function(id) {
      uni.navigateTo({
        url: '../../exam/exam?type=mock&id=' + id + ''
      });
    },
    onClickItem(index) {
      if (this.current !== index) {
        this.current = index;
      }
    },
    choiceTypeOnline: function() {
      this.activeType = 'online';
    },
    choiceTypeScene: function() {
      this.activeType = 'scene';
    }
  }
};
</script>

<style scoped>
.examtype {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  background-color: #ffffff;
}
.examtype .examtypetab {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.examtype .examtypetab image {
  width: 50px;
  height: 50px;
  display: block;
}
.examtype .examtypetab text {
  font-size: 14px;
  color: rgb(55, 55, 55);
}
.examtype .examtypetab text.active {
  color: #27b28b;
}

.uni-padding-wrap {
  background-color: #fff;
}
.segmented-control {
  width: 100% !important;
}
.segmented-control-item {
  line-height: 40px !important;
}

.paper {
  width: 100%;
  height: 120upx;
  border-bottom: 1upx solid #dddddd;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #ffffff;
}
.paper-left {
  display: flex;
  justify-content: center;
  align-items: center;
}
.paper-left image {
  width: 60upx;
  height: 60upx;
  margin: 0 20upx;
}
.paper-right {
  width: 150upx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.paper-right button {
  width: 120upx;
  height: 48upx;
  margin: 0 20upx;
  line-height: 48upx;
  background-color: #f2f2f2;
  border-radius: 4px;
  border: none;
  font-size: 24upx;
  color: #666666;
  padding: 0upx;
}
.paper-title {
  font-size: 28upx;
  line-height: 28upx;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #333333;
  padding-top: 28upx;
  padding-bottom: 15upx;
}
.paper-info {
  font-size: 20upx;
  line-height: 20upx;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #999999;
}

.endpaper {
  width: 100%;
  height: 45px;
  border-bottom: 1upx solid #dddddd;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #ffffff;
}
.endpaper .paper-left {
  width: 100upx;
}
.endpaper .paper-title {
  width: 550upx;
}
.endpaper .paper-right {
  width: 100upx;
}
</style>
